<template>
  <view class="goods-detail">
    <!-- 商品轮播图 -->
    <swiper class="swiper" indicator-dots autoplay circular>
      <swiper-item v-for="(item, index) in goods.images" :key="index">
        <image :src="item" mode="aspectFit"></image>
      </swiper-item>
    </swiper>
    
    <!-- 商品信息 -->
    <view class="goods-info">
      <view class="price-section">
        <text class="price">¥{{goods.price}}</text>
        <text class="original-price">¥{{goods.originalPrice}}</text>
        <text class="sales">已售{{goods.sales}}件</text>
      </view>
      <view class="title">{{goods.name}}</view>
      <view class="spec">
        <text>规格: {{goods.spec}}</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>
    
    <!-- 商品详情 -->
    <view class="detail-section">
      <view class="section-title">商品详情</view>
      <rich-text :nodes="goods.detail"></rich-text>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="action-bar">
      <view class="action-item" @click="goCart">
        <uni-icons type="cart" size="24" color="#666"></uni-icons>
        <text>购物车</text>
      </view>
      <view class="action-item" @click="addToCart">
        <text>加入购物车</text>
      </view>
      <view class="action-item buy" @click="buyNow">
        <text>立即购买</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods: {
        id: 1,
        name: '商品名称',
        price: '99.00',
        originalPrice: '129.00',
        spec: '默认规格',
        sales: 100,
        images: [
          '/static/goods1.jpg',
          '/static/goods2.jpg',
          '/static/goods3.jpg'
        ],
        detail: '<div style="color:#333;">这里是商品详情HTML内容</div>'
      }
    }
  },
  methods: {
    addToCart() {
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      })
    },
    buyNow() {
      uni.navigateTo({
        url: '/pages/order/confirm?type=buy_now&goods_id=' + this.goods.id
      })
    },
    goCart() {
      uni.switchTab({
        url: '/pages/cart/index'
      })
    }
  }
}
</script>

<style>
.goods-detail {
  padding-bottom: 100rpx;
}
.swiper {
  height: 750rpx;
}
.swiper image {
  width: 100%;
  height: 100%;
}
.goods-info {
  padding: 20rpx;
  background-color: #fff;
}
.price-section {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.price {
  font-size: 44rpx;
  color: #ff2d4a;
  font-weight: bold;
  margin-right: 20rpx;
}
.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
  margin-right: 20rpx;
}
.sales {
  font-size: 24rpx;
  color: #999;
}
.title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 30rpx;
  line-height: 1.5;
}
.spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-top: 1rpx solid #f1f1f1;
  border-bottom: 1rpx solid #f1f1f1;
  font-size: 28rpx;
  color: #666;
}
.detail-section {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #fff;
}
.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  display: flex;
  background-color: #fff;
  border-top: 1rpx solid #f1f1f1;
}
.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}
.action-item.buy {
  flex: 2;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 28rpx;
}
</style>